<template>
  <div class="main">
    <div class="form">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="用户id" prop="id"></el-table-column>
        <el-table-column label="昵称" prop="nickname"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="薪资" prop="salary"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleChange(scope.row.id)">修改
            </el-button>
            <el-button size="mini" type="danger"
                       @click="removeStaffer(scope.row.id)">辞退
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="修改工资"
        :visible.sync="changeShow"
        width="30%">
     <el-form>
       <el-form-item label="新工资">
         <el-input v-model="salary"></el-input>
       </el-form-item>
     </el-form>
      <span slot="footer">
        <el-button type="primary" @click="changeSalary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cookie from "js-cookie";
import {allStaffer, deleteStaffer, setSalary} from "@/http/api/restaurant";
import response from "@/http/response";

export default {
  name: "StafferList",
  data() {
    return {
      salary: 0,
      tableData: [],

      targetId: '',

      changeShow: false,
    }
  },
  methods: {

    async getAll() {
      let result = await allStaffer({
        restaurantId: cookie.get('restaurantId')
      })
      if (result.code === response.success) {
        let data = result.data
        if (!data) {
          return this.tableData = []
        }
        // 性别转换
        for (let i = 0; i < data.length; i++) {
          data[i].sex = (data[i].sex === '1') ? '男' : '女'
        }
        this.tableData = data
      }
    },

    // 辞退员工
    async removeStaffer(userId) {
      let result = await deleteStaffer({
        restaurantId: cookie.get('restaurantId'),
        userId: userId,
      })
      if (result.code === response.success) {
        this.$message.success("请求成功")
        await this.getAll()
      }
    },

    // 处理点击事件
    handleChange(userId) {
      this.targetId = userId
      this.changeShow = true
    },

    async changeSalary() {
      let result = await setSalary({
        restaurantId: cookie.get('restaurantId'),
        userId: this.targetId,
        salary: this.salary,
      })
      if (result.code === response.success) {
        this.$message.success("请求成功")
        await this.getAll()
      }
      this.changeShow = false
    }
  },

  async mounted() {
    await this.getAll()
  }
}
</script>